<template>
  <div class="modal-form-container">
    <vuescroll :ops="ops">
      <Form ref="info" :model="infos" :rules="rules" :label-width="100">
        <FormItem :label="$t('XrbFVpmih0BLHqevO2AB5')" prop="name">
          <Input v-model="infos.name" />
        </FormItem>
        <FormItem :label="$t('1Aeiw87qxzulh_uusmKck')" prop="pwd">
          <Input v-model="infos.pwd" type="password" />
        </FormItem>
        <FormItem :label="$t('jUXYDN8QK2eQkLwAuIiA1')" prop="rpwd">
          <Input v-model="infos.rpwd" type="password" />
        </FormItem>
        <FormItem :label="$t('nm-H-HADPIPxcd4ShO9ez')" prop="roleid">
          <Select v-model="infos.roleid">
            <Option v-for="role in roles" :value="role.id" :key="role.id">{{
              role.name
            }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save">{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button>
          <Button style="margin-left: 8px" @click="close">{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import {
  addUser,
  updateUser,
  getAdminRoleList,
  getUserRoleList
} from '@/api/data2'

export default {
  name: 'login_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    status: String
  },
  data () {
    return {
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      roles: [],
      rules: {
        name: [{ required: true, message: this.$t('Dzu4B2VkCzRHZy1EcXVkq'), trigger: 'blur' }],
        pwd: [{ required: true, message: this.$t('BnhtYo7NNW50ZdWD0kk0v'), trigger: 'blur' }],
        rpwd: [
          { required: true, message: this.$t('9D_w2iOKrk7b9_2NqFkhN'), trigger: 'blur' },
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value) => {
              console.log('=========== confirmPassword ========== ')
              console.log(rule, value)
              return value === this.infos.pwd
            },
            message: this.$t('zwaEc0B1KThYW-uhxi8gF')
          }
        ],
        roleid: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      },
      infos:
        this.status === 'new'
          ? _.cloneDeep(this.data)
          : _.cloneDeep(_.assign({}, this.data, { rpwd: this.data.pwd }))
    }
  },
  computed: {
    isAdmin () {
      return this.$store.getters.isAdmin
    }
  },
  async created () {
    if (this.isAdmin) {
      const { code, data, desc } = await getAdminRoleList()
      if (code == 200) {
        const roles = data.datalist || []
        this.roles = roles.map(r => ({ ...r, id: r.id + '' }))
      } else {
        this.$Message.error(desc)
        this.roles = []
      }
    } else {
      const { code, data, desc } = await getUserRoleList()
      if (code == 200) {
        const roles = data.datalist || []
        this.roles = roles.map(r => ({ ...r, id: r.id + '' }))
      } else {
        this.$Message.error(desc)
        this.roles = []
      }
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          const data = {
            name: this.infos.name,
            pwd: this.infos.pwd,
            operatorid: this.$store.state.user.operatorId,
            stationid: this.$store.state.user.stationId,
            roleid: +this.infos.roleid
          }

          const { code, desc } =
            this.status === 'new' ? await addUser(data) : await updateUser(data)
          if (code == 200) {
            this.$emit('success', desc)
          } else {
            this.$emit('fail', desc)
          }
        } else {
          this.$Message.error(this.$t('fcmS3YBVNyvO3V68Qt3xl'))
        }
      })
    }
  }
}
</script>
